![\"smooth](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/11\/css-to-css3.jpg\")
In this beginner CSS tutorial, we’ll start slow with simple explanations of HTML and CSS, then we’ll push forward into CSS3, the latest version of CSS, and explain a few things about HTML5’s wonderful sidekick.<\/p>\nIn this beginner CSS tutorial, we’ll start slow with simple explanations of HTML and CSS, then we’ll push forward into CSS3, the latest version of CSS, and explain a few things about HTML5’s wonderful sidekick.<\/p>\n
This is a Companion Tutorial to “Smooth Strides from HTML to HTML5<\/a>” where we explored the basic structure of HTML and its newest version: HTML5. We used Speed Skating<\/strong> as a web page example in our first tutorial. Here we’ll switch to Figure Skating in our discussion, just for fun.<\/p>\n <\/p>\n There are no angle brackets < > here. Instead, we use curly braces { }.<\/span><\/p>\n Simply put, HTML tells the web browser the content to present while CSS tells the web browser how to present it.<\/p>\n Example CSS: p {text-align: center; font-color: blue;}<\/strong><\/p>\n Web browsers interpret those instructions from a CSS style sheet.<\/p>\n h1 {color: green;}<\/strong><\/p>\n What you see above is a simple CSS rule that sets the color of all first-level headings (h1).<\/p>\n CSS has selectors<\/strong> and declarations.<\/strong> The selector specifies what elements (in the related HTML document) are affected by the declaration. A declaration contains properties and values.<\/p>\n selector {property: value}<\/strong><\/p>\n \u2022 Selector – the part before the left curly brace h1 {color: green;}<\/strong><\/p>\n The property is color. The value here is green.<\/p>\n In the example above, the selector is h1<\/strong> and the declaration is “color:\u00a0green.”<\/strong> All h1 elements in the related HTML document will be turned green.<\/p>\n In Part Two, we will discuss how to apply CSS to HTML.<\/p>\n <\/p>\n There are three ways you can apply CSS to an HTML document. The recommended method is to link to an\u00a0external style sheet.<\/strong> This technique can save you a lot of work. If for example, you would like to change the background color of 10 pages in a website, a linked style sheet can save you from having to manually change all 10 web pages, one by one. Using CSS, the change can be made in a few seconds.<\/p>\n <link rel=”stylesheet” href=”style.css”><\/strong><\/p>\n NOTE:<\/strong> You can link to more than one style sheet in an HTML document.<\/p>\n We can group Selectors together and Rules together.<\/p>\n Consider these three rules:<\/p>\n h1 {color: green;}<\/strong> All three rules have the same declaration – they set the h1<\/strong> in the related HTML document to be green.<\/strong> Since all three declarations are identical, we can group the selectors into a list (separated by commas) and only write the declaration once:<\/p>\n h1, h2, h3 {color: green;}<\/strong><\/p>\n A selector may have more than one declaration. For example, we could write a style sheet with these two rules:<\/p>\n h1 {color: green;}<\/strong> Or we can tidy up the style sheet by grouping the declarations that relate to the same selector into a list (separated by semicolons)<\/p>\n h1 {color: green; text-align: center;}<\/strong><\/p>\n Next we will look at the CSS Order of Precedence. This is a simple subject and of great importance, because without understanding it, CSS can be frustrating.<\/p>\n [section_title title=Part Three – The CSS Order of Precedence]<\/p>\n Sometimes, CSS can be frustrating when you make a rule in your CSS document and the change is not what you expect when you see the linked web page in a browser. By understanding a little bit about the CSS Order of Precedence, you will have fewer moments of frustration.<\/p>\n Helpful Hint #1:<\/strong> If you’re placing two rules on one element, using the same class selector, and both rules are in the same style sheet, the rule that is further down will override the rule that is higher up in the style sheet.<\/p>\n For example:<\/p>\n .favorite {color: red;}<\/strong> The color will be black.<\/p>\n You may think that you will never do this when you write your CSS rules, but the day may come when you go back to a style sheet that you started a year earlier. You add a new rule, hoping to change something in your web page to RED, but then nothing happens. You go back and look at your rule. It is coded perfectly. You look at your web page in the browser again. You refresh your web browser 3 times. Still… nothing changes. Finally, you examine your style sheet, rule by rule. You discover the same rule listed twice (with different values in the declaration).<\/p>\n Helpful Hint #2:\u00a0<\/strong> It’s also useful to note that if a link to an external style sheets is placed underneath a link to another style sheet, the styles in the lowest style sheet override those in the higher style sheet.<\/p>\n <link rel=”stylesheet” href=”style.css”><\/strong> We discussed how to link to external style sheets in our related tutorial: Smooth Strides from HTML to HTML5.<\/strong><\/p>\n Here is the order in which this takes place:<\/p>\n The ID selector overrides all the other selectors. It is the most important. So if your web page is not doing what you think it should, consider the selectors you are using, the order in which you are using them in and the style sheet where they are placed.<\/p>\n In our related tutorial, we mentioned a tag <div id=”wrapper”>.<\/p>\n We can style that tag by using this code in our CSS style sheet:<\/p>\n #wrapper {text-align: center;}<\/strong><\/p>\n The (#) sign refers to an ID tag. It is specific. There can only be one ID of #wrapper<\/strong> in a web page.<\/p>\n We also mentioned a tag <span class=”special”>. We can style that tag by using this code in our CSS style sheet.<\/p>\n . special {color: red;}<\/strong><\/p>\n The (.) sign refers to a CLASS tag. It is not that specific and can be overridden with an ID selector. You can write <span class=”special”> in your web page as many times as you like.<\/p>\n Learn more about ID and Class Selectors<\/a>.<\/p>\n <\/p>\n This is a Companion Tutorial to “Smooth Strides from HTML to HTML5<\/a>” where we mentioned some of HTML5’s new elements. But we also discovered that there is a problem with old web browsers and their understanding of these new elements. Basically, they have no clue what they are.<\/p>\n But we can get them to cooperate with our progressive efforts by adding some code to our linked CSS3<\/strong> document. We have linked to our CSS document with the link<\/strong> element in the head<\/strong> element of our HTML5<\/strong> page.<\/p>\n <link rel=”stylesheet” href=”style.css”><\/strong><\/p>\n As you can see, we named it “style.css”<\/strong> and in order for this to work correctly, we must put our CSS style sheet at the same level as our HTML5<\/strong> document in our website. If we decide to put the CSS file in its own folder, it won’t be linked correctly.<\/p>\n To help old web browsers understand the new HTML5 elements we added to our web page: header, nav, aside, section, article <\/strong>and footer<\/strong>, we must add the following code to our CSS style sheet.<\/p>\n We can write it like this:<\/p>\n article, section, aside, nav, header, footer<\/strong> or this:<\/p>\n article, section, aside, nav, header, footer {display: block;}<\/strong><\/p>\n The web browsers understand both ways of styling the CSS rule. (By the way, a block-level element occupies the entire space of its parent element (container), thereby creating a block.<\/strong>)<\/p>\n Now in order to position the elements in\u00a0our web page so that each of our “sectioning”<\/strong> elements don’t just fill up the full width of the page (since they are block elements), we need to use CSS to create a page layout.<\/p>\n CSS layout is something that you will learn through experience, learning the different CSS properties, following tutorials and practicing a lot.<\/p>\n <\/p>\nWhat’s the difference between HTML and CSS?<\/h4>\n
\n
In CSS, the syntax is different than HTML.<\/h3>\n
HTML, CSS and Web Browsers<\/h3>\n
\n
Let’s take a closer look at CSS.<\/h4>\n
Anatomy of a Rule<\/h3>\n
![\"CSS](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/11\/css-rule.gif\")
<\/a><\/p>\n
\n\u2022 Declaration – the part within the curly braces.<\/p>\n\n
Part Two: How do we apply CSS to HTML?<\/h3>\n
![\"A](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/11\/css-style-sheet.gif\")
<\/a><\/p>\nLet’s Tidy Up our Style Sheet by Grouping<\/strong><\/h3>\n
\n h2 {color: green;}<\/strong>
\n h3 {color: green;}<\/strong><\/p>\n
\n h1 {text-align: center;}<\/strong><\/p>\n\n
Part Three: The CSS Order of Precedence<\/h3>\n
\n .favorite {color: black;}<\/strong><\/p>\n
\n <link rel=”stylesheet” href=”layout.css”><\/strong><\/p>\n![\"CSS](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/11\/css-order-of-precedence.gif\")
<\/a>Helpful Hint #3:<\/strong> Different selectors naturally override others.<\/p>\n\n
Using IDs and Classes<\/h4>\n
\n
Part Four: CSS3 Helps Old Web Browsers Understand HTML5<\/h3>\n
\n {<\/strong>
\n display: block;<\/strong>
\n }<\/strong><\/p>\n\n
Part Five: 3 New Popular Properties in CSS3<\/h3>\n