What You Will Learn in This CSS Lesson
You will gain an understanding of what CSS is used for, who developed it, and where to write your CSS code. This is the first of a four-part series of lessons about using CSS for web page design.
Cascading Style Sheets (CSS)
CSS is a markup language, just like HTML. Every web page uses CSS to control the appearance of the page content. You can style your HTML content with CSS rules to specify how everything looks. Use CSS to control visual properties such as font, text size, color, text weight and alignment. CSS can style any HTML element, not just text. It is used to style the page. Want a color or image in the background of your page? Use CSS. Want your page positioned in two or three columns? CSS properties can control the size of those columns, their background color, and borders.
When was CSS Developed?
The World Wide Consortium (W3C) initially released Cascading Style Sheets (CSS) in 1996 to increase the presentational sophistication and accessibility of websites. The W3C maintains the CSS specification, and provides a free CSS validation service for CSS documents.
Who Created CSS?
Håkon Wium Lie and Bert Bos worked together with Tim Burners-Lee to write the CSS proposal.
Separation of Content from Presentation
Håkon said “Bert Bos and I strongly felt that HTML should not degenerate into a visual language. We wanted HTML to remain a semantic language so the content could be presented on all sorts of devices, not just visual ones. Therefore we developed CSS. So, in a way, you could say CSS was developed to save an even more important language, namely HTML.”
Why Should We Use CSS?
The quick answer is that using CSS will give you better searching, faster loading, more consistent design, and make design and editorial updates easier.
Google (or any search engine) cares about content, not appearance. Separating the design from the content makes it much easier for Google to focus on searching your content.
Placing the CSS styling in a separate file than be reused by all your site’s pages increases the efficiency of your site’s loading time. The CSS file only has to download once to style all the pages on your site.
Better, More Consistent Design
Being able to style multiple pages with the same CSS style sheet makes a lot of sense to designers. We care about branding and design consistency, and presenting content in an engaging manner. Having all the pages in your site styled by the same set of CSS rules helps the pages look consistent.
Easier Design Updates
It is easier to update the design of a site by modifying the CSS style sheet, or switching to a new CSS style sheet. It is easier to focus on design changes when it is separated from the content.
Easier Content Updates
It is easier to update the content of a site if it is not buried in lengthy visual attributes in the HTML. Removing the design attributes from HTML makes it much simpler and easier to edit your text, images, and links when updating your site.
Accessibility is Improved
Separation of content from visual presentation makes your site more accessible. It is easier for a screen reader to read your page out loud properly when the content is separate from the visual styling.
Where Does the CSS Code Go?
Your CSS code can go in three different places: inline or embedded in the HTML file, or external in a separate CSS file.
Inline CSS Styles
- In the body of the HTML file
- Affects only one HTML element at a time
Embedded CSS Stylesheets
- In the Head section of the HTML file
- Can affect multiple elements on a page
External CSS Stylesheets
- In a separate file with a CSS extension
- Can be linked to any number of HTML pages
How do I learn CSS?
Our CSS tutorials will walk you through everything you need to know. In the next three lessons we’ll try out some CSS styling. The First Lesson will be devoted to trying out inline styles. Lesson Two will focus on embedding the CSS styles in the head section of an HTML page. Lesson Three will show the power of creating a separate CSS file and linking it to your HTML pages. We’ll explore the pros and cons of each method.