Tuesday, February 13, 2018

WebDesign: CSS, Separation and Selectors (W6-P2)

What is the purpose of CSS?  Why we need a HTML file and a CSS file in web design.

"CSS is designed primarily to enable the separation of document content from document presentation, including aspects such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content" (Wikipedia).

The CSS file/document that describes the layout of a web document looks like the  code on the right.

The key statement in CSS are selectors. With selectors you are "selecting"/indicating which part of the HTML code you want to change the appearance of.  You then give specific instructions on what those changes are.  You indicate what and then say how.

There are three kinds of selectors in CSS: (1) type selectors, (2) class selectors, and (3) ID selectors.

For example, in the CSS code above, h1 is a type selector. This part of the CSS code tells the web browser how to display the heading 1 content found in the HTML code. The web browser would look through the HTML code for all h1 type selectors and apply the presentational style to the content in h1 element. It, for example, tells the browser to display the heading 1 content with an orange background and white letters.

In this example, the content in the HTML file is separated from the presentational style information which in the CSS file.

Why separate the content from the style? Why have separate documents (one HTML and one CSS)?

Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.

No comments:

Post a Comment

Thank you for your comment.
Your comment will be reviewed.
If acceptable, it will be posted after it is carefully reviewed. The review process may take a few minutes or maybe a day or two.