External style and Group Selector in CSS

Ad Code

External style and Group Selector in CSS

RK Tutorials February 05, 2022

 

Using an External Style Sheet:
The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.
●  Create styles that apply to an entire Web site by creating a text file containing style declarations.
●  Most style sheets have the extension ".css".
●  Within a style sheet, don't need <style> tags, just the style declarations.
<Link> to Style Sheets:
●  Use the <link> tag to link Web pages to a style sheet.
      

<link href="URL" rel=" relation_type" type="link_type">


URL is the URL of the linked document relation_type establishes the relationship between the linked document and the Web page link_type indicates the language used in the linked doc.
●  value of the rel attribute should be "stylesheet"
●  Value of the type attribute should be text/css.
●  To link to a style sheet named mystyle.css :

<head>  
<link href="mystyle.css" rel="stylesheet" type="text/css">  
</head>


Here is the style definition in the mystyle.css file
h1 { font-family: Arial,sans-serif; font-size: 48pt; font-weight: bold }
Note: You should not use a space between the property value and the unit. For example: It should be margin-left:20px not margin-left:20 px.

Parent and Descendant Elements:
●   An element that lies within another element is called a descendant or descendant element.
●  An element that contains another element is called the parent or parent element.
●  An example of a parent is the <body> tag, which contains all of the other tags used to format the content of a Web page.

Grouping Selectors:

CSS also allows making it incredibly easy for targeting more than one element at a time to allow for specific CSS properties and rules. That means you have to separate the selector's names with a comma to implement CSS styles on many elements.
Instead of

h1{
     font-family:Verdana,sans-serif;color:blue;
}

h2{
     font-family:Verdana,sans-serif;color:blue;
}

Combine Rules

h1, h2{
     font-family:Verdana,sans-serif;color:blue;
}


Advantage of Group Selectors

  • The same style definition is implemented over multiple elements.
  • Code size gets minimized.
  • Commas are used to isolate every selector while grouping; hence it easily readable.
Text formatting :
Bold:  If we want to bold text using CSS then we use following statement.
font-weight:bold
<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    text-align: center;  
    color: red;  
}  
</style>  
</head>  
<body>  
<h1 class="center">This heading text is red and center-aligned.</h1>  
<p class="center">This paragraph is red and center-aligned.</p>   
</body>  
</html>


Universal Selectors:

The asterisk (i.e., "*") symbol used for denoting the selector as a universal selector, it helps in choosing any elements within the HTML page. It is helpful when you wish to put a specific style in all the HTML elements within your web page. It can also be used for every single element that is within the element of your HTML page.

Example


* {
     margin : 0px;
     padding : 0px;
  }


In the above example, all HTML elements will have 0px padding and margins, and it will overwrite default padding and margins with all HTML elements.

Classes and IDs Selectors:

●  Class Selector
Class selector allows to select HTML elements with a specific class attribute and write period (.) character, followed by the class name. We can also use more than one class and class name cannot start with a number.
In CSS:
.center {
text-align: center;
color: red;
}
In HTML:
<h1 class="center">This heading text is red and center-aligned.></h1>
<p class="center">This paragraph is red and center-aligned.</p>

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.center {  
    text-align: center;  
    color: red;  
}  
</style>  
</head>  
<body>  
<h1 class="center">This heading text is red and center-aligned.</h1>  
<p class="center">This paragraph is red and center-aligned.</p>   
</body>  
</html>


ID Selector


Allow to select a specific element. To select an element with a specific id, write a hash (#) character, followed by the id of the element. An id is always unique within the page so it is chosen to select a single, unique element.
In CSS: #copyright { color: blue; }
in HTML: <p id="copyright">
●  Selectively apply a style to HTML elements.
●  Can define different classes of style to the same element, and apply the appropriate class of style when required
HTML:
<P CLASS="first">The first paragraph</P>
<P CLASS="second">The second paragraph</P>
<P CLASS="third">The third paragraph</P>
Stylesheet
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
●  In CSS, a class refers to a particular category of a more general tag.
●  Let's say you wanted odd and even table cells to be different colors for easier scanning

TD {font-face : sans-serif; font-size : 12pt}
.even {bgcolor : #FFFFFF}
.odd {bgcolor : #CCCCCC}
In HTML code for the table, simply reference the class to invoke the style: display this text with a white background and this text with a grey background
●  In HTML code for the table, simply reference the class to invoke the style:
<td class="even">display this text with a white background</td>
<td class=“odd”>and this text with a grey background</td>
TR {font-face : sans-serif; font-size : 12pt}
.even {background-color : #FFFFFF}
.odd {background-color : #CCCCCC}
#header {color : red}
●  Now, specify a row as a header:
<tr id="header">Red, sans-serif, 12pt type on a white background, por favor</tr>


«1234567»


RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code