Cascading Style Sheets (CSS) can be used to style web pages.<\/p>\n\n\n\n
While HTML tells the browser what to display on a page, CSS tells the browser how to display it.<\/p>\n\n\n\n
CSS rules can be added to an HTML file using the <style> tag, and\/or it can be in a separate file included using a <link> tag. Either way this would be done in the header section of the HTML.<\/p>\n\n\n\n
This method is best where the styles are consistent across the whole website.<\/p>\n<\/div>\n<\/div>\n\n\n\n
A CSS rule set consists of:<\/p>\n\n\n\n
a selector \u2013 points to the HTML element you want to style<\/li>
a declaration block \u2013 defines the properties and values of the style to be used<\/li><\/ul>\n\n\n\n
Image from BBC Bitesize<\/figcaption><\/figure><\/div>\n\n\n\n
In the case above the selector shows that the style will be applied to all h1 tags.<\/p>\n\n\n\n
The declaration block contains one or more declarations. These are separated by semicolons.<\/p>\n\n\n\n
Each declaration includes a property name and a value. These are separated by a colon. The entire group of declarations is surrounded by curly brackets.<\/p>\n\n\n\n
Style declarations<\/h2>\n\n\n\n
Whitespace in a declaration is ignored. Therefore, sometimes the declarations are shown on a single line like this:<\/p>\n\n\n\n
One property value pair per line is the most readable once you start applying complex styles. In either form, the heading would show on screen as blue text with a font size of 12.<\/p>\n\n\n\n
\n\n\n\n
Selectors<\/h2>\n\n\n\n
The selector is how you choose the HTML elements that are affected by the CSS properties. You can use:<\/p>\n\n\n\n
This means apply these CSS properties to all h1 elements in the page. Using a HTML tag as the selector is how you change the default appearance of the whole site.<\/p>\n\n\n\n
\n\n\n\n
Class selectors<\/h3>\n\n\n\n
\n
\n
<p class=\"intro\">Some text to display.<\/p><\/code><\/pre>\n<\/div>\n\n\n\n
You use a period then the class name to apply a class based selection. A class selector applies the CSS properties to any elements with the matching class assigned. You can also use it in combination with a tag selector. In the above example any tag with an intro class has their color and padding change, but paragraphs with the intro class also have their background-color altered. Classes are useful ways to assign styles to different sections of a website.<\/p>\n\n\n\n
\n\n\n\n
ID selectors<\/h3>\n\n\n\n
\n
\n
<p id=\"userfeedback\">Some text here.<\/p><\/code><\/pre>\n<\/div>\n\n\n\n
To use an ID based selector you use the hash symbol then the ID of the HTML element to match. Because IDs are unique, ID based selectors are used mainly for forms or menus where it has to behave differently from the rest of the site.<\/p>\n\n\n\n
\n\n\n\n
Nested selectors<\/h3>\n\n\n\n
\n
\n
<div><p>Some text here<\/p><\/div><\/code><\/pre>\n<\/div>\n\n\n\n
\n
div p {\n background-color: #33cc33;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
You can use nested selectors to limit CSS properties to only affect tags that occur beneath other tags. In the above example we only want paragraphs that are within div tags to be altered, not all paragraphs.<\/p>\n\n\n\n
To use a pseudo class you use a colon followed by the pseudo class name. A pseudo class is used to define a specific state of an element such as when a mouse is hovering over it or if a link has already been visited. Some of the more common pseudo classes:<\/p>\n\n\n\n
link (every link that hasn’t been visited)<\/li>
visited (every link that has been visited)<\/li>
hover (hovering the mouse of the element)<\/li>
active (every link to the current active page)<\/li>
first-child (the first HTML element within the tag that this is applied to)<\/li>
nth-child(n) (the nth<\/sup> HTML element within the tag that this is applied to)<\/li>
lang(language) (every element with a lang attribute matching the language passed into the selector)<\/li>
checked (every input that is checked)<\/li>
enabled (every input that is enabled)<\/li><\/ul>\n\n\n\n\n\n\n\n
Pseudo element selectors<\/h3>\n\n\n\n
h1::after {\n ...\n}<\/code><\/pre>\n\n\n\n
To use them you use two colons followed by the pseudo element. Pseudo element selectors can style specific parts of the content such as:<\/p>\n\n\n\n
first-letter (Changes the style only for the first letter of the element)<\/li>
first-line (Changes the style only for the first line of the element)<\/li>
before (insert content before the element)<\/li>
after (insert content after the element)<\/li><\/ul>\n\n\n\n
![\"Image](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/13152956\/HTML13-e1652188276391.png\")