Cascading Style Sheets (CSS) is a language that defines the appearance of an HTML document. It describes how HTML elements should be displayed in a web page. It can save a lot of work as it can control layouts, colors and other styles of multiple web pages all at once from a single page.
A CSS syntax consists of a selector and a declaration block. A selector points to the HTML element that is being styled while the declaration block contains one or more style declarations separated by semicolons. Each declaration includes a CSS property name and a value separated by a colon. A CSS declaration always ends with a semicolon and declaration blocks are surrounded by curly braces. There shouldn't be any space between the css property value and the unit.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<style>
p {
color: white;
background: black;
padding: 10px;
text-align: justify;
}
</style>
The example above will make all the paragraphs within the HTML doucments' background black and the text white. The paragraph block will have a spacing of 10 pixels on all four sides between the border and the text while the text will be justified on both ends left and right.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Since the element name as stated above will style all the elements with same element name, you will need something to specify one or more specific HTML element name among others within a document to style them separately using CSS. CSS element selectors will help you do that easily.
The element Selector selects HTML elements based on the element name.
p {
color: white;
background: black;
padding: 10px;
text-align: justify;
}
This property will be applied to all <p> elements within the HTML document and style them accordingly.
The id selector selects HTML element with a specific id attribute. A hash followed by the id name is used to select such element. General rule of id is that each id should be unique and hence can't be used more than once in an HTML document.
<p id="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<style>
#demo{
color: white;
background: black;
padding: 10px;
text-align: justify;
}
</style>
This property will be applied to the html element having id name "demo" within the html document.
The class selector selects HTML elements with a specific class attribute. A dot followed by the class name is used to select such elements.
<p class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<style>
.demo{
color: white;
background: black;
padding: 10px;
text-align: justify;
}
</style>
This property will be applied to all html elements with the class name "demo" instead of the <p> element within the html document and style them accordingly.
Since a class name can be used by more that one HTML element, you can specify the HTML element along with the class name to style specific HTML element with the class name within the document. Element name followed by dot and the classname with no white space inbetween is written to specify such elements.
<h2 class="sameclass">This is a heading.</h2>
<p class="sameclass">This is a paragraph.</p>
<style>
p.sameclass{
color:red;
}
</style>
In this example only the <p> element will be styled.
An HTML element can have multiple classes and any of those classes can be used to style the element. If both classes are used to style the element with same css property name and value which creates conflict, the CSS property value in the stylesheet which appears latter will override the former value set to the HTML element.
<p class="large red">This is a demo.</p>
<style>
.large{
font-size: 60px;
color: blue;
}
.red{
color: red;
}
</style>
The <p> in above example will appear as red colored with font size of 60 pixels in the browser.
If you need to style more than one HTML element or classes or ids with the same CSS properties, you can group them into one and add styles together. This will help you minimize the code.
h1, p, .color, #align{
color: red;
text-align: center
}
This CSS style will be applied to all <h1>s, <p>s and other elements with class color and id align within the HTML document.
Comments are skipped by browsers when loading contents but can be used to explain the code which may be useful when you or somebody else need to edit the source code at a latter date. A CSS comment starts with /* and ends with */.
/* This is a single line CSS comment */ /* This is a multiline CSS comment. */
There are three ways of adding CSS style to an HTML document.
An inline style can be used to apply a unique style for a single element. To use inline styles, add the style attribute to the HTML element.
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Internal styles can be used if a single page has unique styles. Internal styles are defined within the <style> element inside the HTML page which is generally placed inside the <head> element or right after the opening <body> element or right before the closing <body> element to keep the code neat. You can add it anywhere you want within the <HTML> element though.
<style>
.demo{
color: white;
background: black;
padding: 10px;
text-align: justify;
}
</style>
With an external style sheet, the look of an entire website can be changed by changing just one css file. These files have .css file format. The associated HTML page must include a reference to that external style sheet file in the <link> element inside the <head> section as shown below.
<head> <link rel="stylesheet" href="style.css"> </head>
External stylesheets are used most often than not beacause of its convenience. Although, it has a disadvantage of an additional server request to load the page, its effeciency on controlling multiple pages from a single file beats its demerit.
If you inspect some web pages, you can see most of the web pages include minimum inline CSS for above the fold content i.e. contents of a web page that are seen in the browser without a need to scroll, in order to make the page load even faster, rest of the CSS styles are written in external style sheets.
Leave a comment