Insights to CSS language rules
CSS stands for Cascading Style Sheet and is the type of code you use to style and design your website (including colours, text sizes, fonts, simple animations and interactions).
Unlike HTML is a markup language and is used to build the structure of website, CSS is a style sheet language, which is used to style HTML elements and change the way they look when they are rendered on the web. To do so it's essential to link the CSS document inside the head of the HTML code using: <link href="styles/style.css" rel="stylesheet" />
CSS too has its own syntax and rules.
Just like the whole content and the two opening and closing tags in an HTML text is called "element", the basic CSS structure is a Rule/Ruleset .
Usually, each Ruleset is made up of the following:
- a selector, which is the whole structure. It is the word(s) marked in yellow at the beginning of the sentence and define the element(s) to be styled. If you have a CSS document linked to an HTML text, and you want to style an HTML element, you can simply copy the opening tag of that element inside the CSS as the selector of a ruleset. (This is called element selector as it styles the selected HTML element).
- curly brackets (opening and closing a declaration)
- declaration (the content inside the curly brackets. A declaration is a single rule and each declaration is written in a line of code. Each declaration has a property and a value. You can have multiple declarations inside a ruleset that refer to the same selector. However, in this case, you must separate each declaration with a semi-colon at the end and change line).
- property, which is the code that styles your HTML as they are properties of that element, therefore can make it look the way you want (for example colour, font size, font family, rounded corners, padding, margin, borders and much more).
- property value, which you can choose and change out of many possible appearances of that property, the one you prefer (for example, colour red instead of blue, 50 px font size and much more).
Property and property value are separated by a colon. A semi-colon separates each declaration from the following one (eg: colour declaration from font size declaration)
It's important to add a semi-colon at the end of each declaration.
For example:
HTML
<h3 class:"3rd-heading">This is <i>your</i> third heading!<br>This heading is a secondary title.</h3> (the whole sentence is an element)
Where This is <i>your</i> third heading!<br>This heading is a secondary title is the content of the element; <h3> is the opening tag of the element (third heading); </h3> is the closing tag; class is the attribute name of the element and "3rd-heading" is the attribute value; <i>your</i> is the nested element (<i> tag isolates its content from the rest of the main element by making it appear in italics; your is the nesting element content and </i> is its closing tag; <br> is the void tag, which embeds no content, it only represents a line break between the first sentence This is your third heading! from the second one This heading is a secondary title.
CSS
h3{
colour: #ee6003;
font-size: 42px;
padding-top: 10px;
}
Where:
h3{
colour: #ee6003;
font-size: 42px;
padding-top: 10px;
} together is the whole ruleset;
h3 is the selector (in this case called element selector); colour: #ee6003, is the first declaration; font-size: 42px is the second declaration; padding-top: 10px is the third declaration; colour, font-size, padding-top are the properties of each declaration; and finally #ee6003, 42px, 10px are the property values.
You can also apply the same ruleset to different selectors. For example:
h3,
h4,
li {
font-size: 42 px;
font-weight: 600;
}
Reference list:
- CSS, C. (2019). Cascading Style Sheets| MDN, 2019. URL https://developer. mozilla. org/en-US/docs/Web/CSS. Accessed, 13.
- Syntax, J. S. O. N. (2012). // w3schools. com. URL: https://www. w3schools. com/js/js_json_syntax. asp.
J Syntax - URL: https://www. w3schools. com/js/js_json_syntax …, 2012 - stxavierstn.edu.in
Comments