Friendly CSS3 Course #Part 2- CSS3 Basics


Deprecated: Function create_function() is deprecated in /home/vhosts/poweredbygnulinux.com/wp-content/plugins/codecolorer/lib/geshi.php on line 4698

Introduction

You will learn :

  • Selecting objects to work with (Making a p or h3 style requires selecting <p> and <h3> tags (objects) within the document.)
  • Basics of how layout works (how CSS interacts with the drawing area on screen)
  • using a style to add the background (If you want to update the background, you can update all pages on site at once , using styles is for creating an environment where you can perform tasks easily and reliably.)

Using TAG selectors

To change an object to look in a different way , first you select the object and then you make changes to it. Webpages can be very large with too much objects . How can you select the right object? We will learn methods for selecting objects without knowing what those objects are.

  • Tag: You can interact directly with any tag, such as < p >  and < h3 > . you could choose to interact only with  tags found within a < div > (a subsection in html)
  • Attribute: The most commonly used attributes with CSS are class and id.
  • Pattern: Example: you might want to format every other list item in a specific way to make the list items highlight.If you add a new li  , CSS would automatically reformat the items to your style.
  • Event: you can trap an event, such as a mouseover, and create CSS to interact with it giving a programming-like style. . The object is formatted one way normally and then different way when the mouse passes over it
  •  State: Objects on a page have a state.links are active, visited, or unvisited. You can choose to format these objects in different ways.While you interact with the state information depends on the kind of effect you want to get.

 

youtube

Clik to look the video : CSS Tag Selectors (using Sublime Text editor for coding) 

w3shcoolsYou will find an excelent reference in w3schools. Click to see a complete table about selectors.   tutplus   Also you will find a very useful details in tuts+ , click to see the article 30-css-selectors-you-must-memorize

Combinations of tag selectors

  • TAG1 , TAG2 :        with a comma means selecting both tags    ( tag1 AND tag2 )
  • TAG1 > TAG2 :       with a greater-than sign (>) select a tag that has another tag as a parent.  If you have <div><p/></div> and use div>p, the browser will select the <p>
  • TAG1 TAG2            select a tag that appears within another tag  that not directly appears immediately before the second tag
  • TAG1 + TAG2         select a tag that appears immediately after another tag , not inside, after
  • TAG1~TAG2           select every tag that appears after another tag (not only the first like tag+tag do)
  • :ROOT                    Selects the root element of the document, depends on the doc type

Examples : Lets apply styles using selectors to the following HTML code.

  • Fist write the following HTML code in the file test2.HTML
  • Second add the CSS styles in the file test2.css .Read the commentaries . they shows you how works the output style.
  • Third you will see the output with the specified style.

 

<!DOCTYPE html>
<html>
<head>
<title>A Simple Page</title>
<link rel="stylesheet" href="test2.css" />
</head>
<body>
<h1>A Simple Heading</h1>
<p>Simple text to go with the heading.</p>
<div>
<p>Text within a DIV.</p>
<span>
<p>Text with a DIV parent.</p>
</span>
</div>
<p>Text after a DIV.</p>
<p>More text after a DIV.</p>
</body>
</html>

This is the style. Pay attention to the selectors used , and how them changes the style .Following this CSS file , you will see the output displayed in the browser.

p
{font-family: cursive;
font-size: large;
color: #0000ff;
background-color: #ffff00;
}
h1
{font-family: "Times New Roman",Georgia,serif;
font-size: 40px;
text-align: center;
text-decoration: underline;
color: #ff0000;
}

div>p
{
text-align: right;
} /* the only <p> tag that’s been affected is the one that has the <div> tag as a direct parent*/

div p
{
text-decoration: line-through;
background-color: #ff7f7f;
}/* two lines are affected this time ,background-color style has been changed */

div+p
{
font-family: monospace;
font-style: italic;
} /* Only the line that appears directly after the <div> is affected*/

div~p
{
font-weight: bolder;
font-size: 30px;
margin: 0px;
color: #7f007f;
}/* Notice that both <p> tags that appear after the <div> tag are affected*/

test2output

Using attribute selectors

Two common attributes are the tag identifier (id) and CSS class (class). But there are others. .ClassName :  Selects objects that have a class attribute value with the given name in the HTML    Example, .headertext would select every object that has a class=”headertext” attribute #id:              :     Selects objects that have an id attribute value with the given name.                      For example, #SecondHeader would select an object that has an id=”SecondHeader” in HTML [Attribute=Value]    Selects all objects that have an attribute with a specific  value. For example,[lang=”en-us”] would select every object that has a language attribute with a value of English.

  • Fist write the following HTML code in the file test3.html (adding the code to the previous HTML file)
  • Second add the CSS styles in the file test3.css (adding the code to the previous CSS file , the comments /* … */  are not necesary)Read the commentaries . they shows you how works the output style.
  • Third you will see the output with the specified style.
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page</title>
<link rel="stylesheet" href="test3.css" />
</head>
<body>
<h1>A Simple Heading</h1>
<p>Simple text to go with the heading.</p>
<h1 id="SecondHeader" class="SubHead" title="Sub-Header">
Second Heading
</h1>
<p id="SecondaryPara" class="StdPara" title="Secondary-Paragraph">
More Text for second heading
</p>
<h1 id="ThirdHeader" class="SubHead" title="Sub-Header Secondary">
Third  heading
</h1>
<p id="SecondaryPara" class="StdPara" title="Secondary Sub-Paragraph">
Still More Text for third heading
</p>
<p id="SecondaryPara" class="SubPara" title="Sub-Paragraph" lang="en-us">
Even More Text for third heading
</p>

</body>
</html>
p
{font-family: cursive;
font-size: large;
color: #0000ff;
background-color: #ffff00;
}
h1
{font-family: "Times New Roman",Georgia,serif;
font-size: 40px;
text-align: center;
text-decoration: underline;
color: #ff0000;
background-color: #00ffff;//* add this line too in below h1 tag */
}
/*------------------------------------------------------------------------------*/
/* tag selectors                                                                */
/*------------------------------------------------------------------------------*/

div>p
{
text-align: right;
} /* the only <p> tag that’s been affected is the one that has the <div> tag as a direct parent*/

div p
{
text-decoration: line-through;
background-color: #ff7f7f;
}/* two lines are affected this time ,background-color style has been changed */

div+p
{
font-family: monospace;
font-style: italic;
} /* Only the line that appears directly after the <div> is affected*/

div~p
{
font-weight: bolder;
font-size: 30px;
margin: 0px;
color: #7f007f;
}/* Notice that both <p> tags that appear after the <div> tag are affected*/

/*------------------------------------------------------------------------------*/
/* Attribute selectors                                                          */
/*------------------------------------------------------------------------------*/
.SubHead
{
border: double;
border-width: thick;
border-color: Green;
}/*each object that has a class value of SubHead now has a thick double border colored green.*/

#ThirdHeader
{
text-decoration: line-through;
}
[title|="Sub"]
{
text-align: right;
background-color: rgb(128, 255, 128);
}/*Each object that has the word Sub somewhere in its title attribute is changed. Notice that this particular change affects both <p> and <h1> tags.*/

Using pattern selector

You might want to select just the first object, regardless of what that object might be. In some cases, you want to format with alternate members of a list or other repetitive data element     :first-letter Select the first letter of an object. This selector is useful in creating special textual effects     :first-line Selects the first line    :before Selects the area immediately before the specified object content.  Used to insert something special before the content in the existing object     :after Selects the area immediately after the specified object content.Used to insert something special before the content in the existing object. :first-of-type Selects the first object of a specific type. Even though the specification doesn’t actually tell you that you must provide a type or a parent, some pattern selectors won’t work without one. Typically you see the :first-of-type selector used with a tag selector, (for example, p:first-of-type), but it can also be used with an attribute selector. The following HTML CSS example helps you understand what attribute selectors do and how you can use them to choose specific objects within a page for formatting Lets put in the code:

  • Fist write the following HTML code in the file test3.html (adding the code to the previous HTML file)
  • Second add the CSS styles in the file test3.css (adding the code to the previous CSS file , the comments /* … */  are not necesary)Read the commentaries . they shows you how works the output style.
  • Third you will see the output with the specified style.
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page</title>
<link rel="stylesheet" href="test4.css" />
</head>
<body>
<h1>A Simple Heading</h1>
<p>Simple text to go with the heading.</p>
<ul id="MyList">
<li id="First" class="ListItem">First line</li>
<li id="Second" class="ListItem">Second line</li>
<li id="Third" class="ListItem">Third line</li>
<li id="Fourth" class="ListItem">Fourth line</li>
<li id="Fifth" class="ListItem">Fifth line</li>
</ul>

</body>
</html>
p
{font-family: cursive;
font-size: large;
color: #0000ff;
background-color: #ffff00;
}
h1
{font-family: "Times New Roman",Georgia,serif;
font-size: 40px;
text-align: center;
text-decoration: underline;
color: #ff0000;
background-color: #00ffff;//* add this line too in below h1 tag */
}
/*------------------------------------------------------------------------------*/
/* tag selectors                                                                */
/*------------------------------------------------------------------------------*/

div>p
{
text-align: right;
} /* the only <p> tag that’s been affected is the one that has the <div> tag as a direct parent*/

div p
{
text-decoration: line-through;
background-color: #ff7f7f;
}/* two lines are affected this time ,background-color style has been changed */

div+p
{
font-family: monospace;
font-style: italic;
} /* Only the line that appears directly after the <div> is affected*/

div~p
{
font-weight: bolder;
font-size: 30px;
margin: 0px;
color: #7f007f;
}/* Notice that both <p> tags that appear after the <div> tag are affected*/

/*------------------------------------------------------------------------------*/
/* Attribute selectors                                                          */
/*------------------------------------------------------------------------------*/
.SubHead
{
border: double;
border-width: thick;
border-color: Green;
}/*each object that has a class value of SubHead now has a thick double border colored green.*/

#ThirdHeader
{
text-decoration: line-through;
}
[title|="Sub"]
{
text-align: right;
background-color: rgb(128, 255, 128);
}/*Each object that has the word Sub somewhere in its title attribute is changed. Notice that this particular change affects both <p> and <h1> tags.*/

/*------------------------------------------------------------------------------*/
/* Pattern selectors                                                          */
/*------------------------------------------------------------------------------*/

.ListItem:first-letter
{
font-size: xx-large;
}
.ListItem:after
{
content: " \27A8";/* At the end you see a special arrow character. CSS uses \27A8 to create this character.*/
font-size: x-large;
color: Red;
}
.ListItem:nth-child(odd) /* you can use the even and odd keywords to select the even or odd objects in a list.*/
{
background-color: LightBlue;
}
.ListItem:nth-child(even) /* you can use the even and odd keywords to select the even or odd objects in a list.*/
{
background-color: LightGreen;
}

 

test4output

Finally a summary in a mindmap

pdficon

Download PDF Mindmap

application-arrow-left-icon

Previous Chapter

application-arrow-right-icon

Next Chapter

You may also like...