CSS is used for defining styles, ie, the way in which elements of the page should be displayed. CSS can be used to determine the size and position of elements, specifying colors, backgrounds, fonts characteristic, second. This is achieved by making the set of CSS rules.
Every CSS rule consists of a selector and a declaration. Selector is used to determine the item to which the rule should apply. The declaration states what style should be applied over the selected element or elements.
selector {
style: value;
style2:value;
}
The selector may be a tag name over which is applied a style. The curly braces is a collection of one or more definitions of styles in the form of style: value, separated by semicolons. Styles can be color or font background, font size and so on. Of the types of styles depend specific values that can be assigned. For example, to the size is assigned a numerical value in pixels.
Example: an external CSS style.
body {
margin: 30px;
background-color: #A1D490;
}
h1 {
font-weight: bolder;
font-size: 18px;
}
h2 {
font-weight: bold;
font-size: 16px;
}
h3 {
font-weight: normal;
font-size: 14px;
}
p {
color: darkgreen;
font-family: Georgia;
font-size: 14px;
}
Save this file as style.css.
<!DOCTYPE html>
<html>
<head>
<title>Using CSS rules on HTML document</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about using CSS rules on HTML document." />
<meta name="keywords" content="css rules, html document" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<h1>This is h1 title</h1>
<p>Vivamus non dolor imperdiet, volutpat lorem eu, congue lacus. Mauris ultricies tortor sed nisi interdum convallis. Nulla dolor mi, cursus eget hendrerit ac, luctus at lacus. Suspendisse potenti. Nulla in dui tortor. Mauris eget nisl in nulla scelerisque mattis.</p>
<h2>This is h2 title</h2>
<p>Donec risus justo, suscipit eu dolor non, maximus vestibulum massa. In ac diam elementum, faucibus ipsum vel, laoreet ante. Sed eleifend hendrerit lectus a convallis. Aliquam ut placerat lacus. Praesent tempus sapien at sapien vehicula porta.</p>
<h3>This is h3 title</h3>
<p>You can find lorem ipsum generator <a href="http://www.lipsum.com/">here</a>.</p>
</body>
</html>
Save this file as css.html.
Result:
Explanation: the body of the document is presented by body tag, and has been moved from the edges for 30px on all sides by setting margins. Headings h1 and h2 are in bold, except that the h1 slightly thicker, and it's defined that the text they contain is the font size of 18, 16 and 14 pixel. The text of the paragraphs is in dark green color, with font that appears in Georgia style and font size of 14 pixels.
In a text editor, such as Notepad, Notepad ++, Sublime Text 2 or another, write CSS rules, save it with the extension .css and link it with the HTML document over which it is applied. For this linking can be used link tag in the header of the HTML page. This is external linking of CSS rules.
Example 2: linking external CSS styles in the HTML document.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/2nd-style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" meadia="handheld" />
<link rel="stylesheet" type="text/css" href="css/projector.css" media="projection" />
<link rel="stylesheet" type="text/css" href="css/tv.css" media="tv" />
</head>
Explanation: the viewer will encounter this tag and based on rel and type attributes will conclude that this is a CSS style sheet, which will load from the URL defined in the href attribute. When browser finish loading the CSS file, it will read the rules from it and apply them to HTML elements that suit them. The first two styles are applied only if the HTML is opened in a browser on a standard screen. When you open in form of a document for printing, it will be applied, only styles that have the attribute media = "print". In the same way you can define special styles that will determine how the HTML will be displayed on the mobile device, projector or television.
If some style should be applied only to one page or the part of the page, and nowhere else, you can embed it with the style tag, which is also placed in the header of the HTML page and in whose body you can put CSS rules.
Example 3: embedded CSS styles.
<!DOCTYPE html>
<html>
<head>
<title>Different CSS rules</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about different CSS rules" />
<meta name="keywords" content="CSS rules, CSS" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/2nd-style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" meadia="handheld" />
<link rel="stylesheet" type="text/css" href="css/projector.css" media="projection" />
<link rel="stylesheet" type="text/css" href="css/tv.css" media="tv" />
<!-- Start of embedded css rules -->
<style type="text/css">
body {
background-image:url(images/old-scrolled-paper.png);
background-repeat: no-repeat;
}
h1 {
margin-left: 630px;
font-family: Georgia;
font-size: 24px;
}
p {
margin-left: 250px;
margin-top: 350px;
color: black;
font-size: 22px;
font-family: Georgia;
}
.paragraph {
margin-right: 200px;
margin-top: 0;
margin-bottom: 750px;
}
</style>
<style type="text/css" media="print">
body {
margin: 30px;
}
</style>
<!-- End of embedded css rules -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<h1>Hello World</h1>
<p>This page has an image as the background.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel magna vel lorem pellentesque blandit. Cras ac turpis quis ante suscipit commodo. Nunc vel quam at tortor ornare feugiat. Integer vitae consectetur lacus. Praesent commodo velit vel commodo varius. Proin a enim vitae nunc aliquam efficitur eu sit amet elit. Praesent commodo blandit justo sodales lacinia. Sed in velit tortor. Proin eget neque ornare, cursus sem eget, feugiat justo. Curabitur ut ex vehicula, congue metus et, scelerisque lorem. Nulla odio nulla, dapibus id tincidunt vitae, vestibulum non felis. Curabitur et feugiat purus. Sed augue dapibus, congue justo ut, mollis justo. Aenean at quam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum tristique auctor. Mauris tincidunt lorem convallis turpis facilisis, et rhoncus ex aliquam. Mauris feugiat iaculis urna vel pellentesque. Fusce tempor posuere dictum. Nunc id dapibus orci, vitae eleifend ex. Cras porta commodo fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas non turpis non purus molestie molestie in vel arcu. Suspendisse at lacus varius, malesuada enim nec, tincidunt arcu. Etiam faucibus massa dolor, non sodales ante dapibus gravida. Sed aliquam tellus a consectetur rutrum. Sed nec mollis ex. Integer luctus arcu at nisi porta dignissim. Maecenas in faucibus eros. Nullam in ante id metus rutrum fringilla. Nunc nec sapien ut enim ultricies gravida. Donec euismod velit sit amet magna ullamcorper pretium. Donec sed suscipit nulla. Phasellus aliquet, dui sit amet cursus sodales, lacus ex sodales dolor, eget egestas lectus risus et neque. Quisque tristique lacus ut mattis bibendum. Proin efficitur convallis venenatis. Aliquam commodo pharetra augue, quis tristique urna vestibulum ac. Phasellus ac massa a magna imperdiet pellentesque. Donec egestas nunc sit amet dui cursus varius. Nam auctor ipsum ultrices est volutpat faucibus. Quisque ultricies ullamcorper magna, ut condimentum est sollicitudin id. In laoreet tellus vel lectus ultrices luctus. Nam venenatis faucibus dui, commodo eleifend diam elementum eget. Aenean non eros ac dolor auctor efficitur.</p>
</body>
</html>
Save this file as different-css-rules.html.
Explanation: it is possible to define which devices should be used a certain style, using the media attribute.
The third way to include styles on the page is the inline CSS. This is not recommended.
Example 4: inline CSS style.
<p style="font-size:24px; color: blue; margin-top: -700px;">This is not recommended.</p>
Every CSS rule consists of a selector and a declaration. Selector is used to determine the item to which the rule should apply. The declaration states what style should be applied over the selected element or elements.
selector {
style: value;
style2:value;
}
The selector may be a tag name over which is applied a style. The curly braces is a collection of one or more definitions of styles in the form of style: value, separated by semicolons. Styles can be color or font background, font size and so on. Of the types of styles depend specific values that can be assigned. For example, to the size is assigned a numerical value in pixels.
Example: an external CSS style.
body {
margin: 30px;
background-color: #A1D490;
}
h1 {
font-weight: bolder;
font-size: 18px;
}
h2 {
font-weight: bold;
font-size: 16px;
}
h3 {
font-weight: normal;
font-size: 14px;
}
p {
color: darkgreen;
font-family: Georgia;
font-size: 14px;
}
Save this file as style.css.
<!DOCTYPE html>
<html>
<head>
<title>Using CSS rules on HTML document</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about using CSS rules on HTML document." />
<meta name="keywords" content="css rules, html document" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<h1>This is h1 title</h1>
<p>Vivamus non dolor imperdiet, volutpat lorem eu, congue lacus. Mauris ultricies tortor sed nisi interdum convallis. Nulla dolor mi, cursus eget hendrerit ac, luctus at lacus. Suspendisse potenti. Nulla in dui tortor. Mauris eget nisl in nulla scelerisque mattis.</p>
<h2>This is h2 title</h2>
<p>Donec risus justo, suscipit eu dolor non, maximus vestibulum massa. In ac diam elementum, faucibus ipsum vel, laoreet ante. Sed eleifend hendrerit lectus a convallis. Aliquam ut placerat lacus. Praesent tempus sapien at sapien vehicula porta.</p>
<h3>This is h3 title</h3>
<p>You can find lorem ipsum generator <a href="http://www.lipsum.com/">here</a>.</p>
</body>
</html>
Save this file as css.html.
Result:
Explanation: the body of the document is presented by body tag, and has been moved from the edges for 30px on all sides by setting margins. Headings h1 and h2 are in bold, except that the h1 slightly thicker, and it's defined that the text they contain is the font size of 18, 16 and 14 pixel. The text of the paragraphs is in dark green color, with font that appears in Georgia style and font size of 14 pixels.
In a text editor, such as Notepad, Notepad ++, Sublime Text 2 or another, write CSS rules, save it with the extension .css and link it with the HTML document over which it is applied. For this linking can be used link tag in the header of the HTML page. This is external linking of CSS rules.
Example 2: linking external CSS styles in the HTML document.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/2nd-style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" meadia="handheld" />
<link rel="stylesheet" type="text/css" href="css/projector.css" media="projection" />
<link rel="stylesheet" type="text/css" href="css/tv.css" media="tv" />
</head>
Explanation: the viewer will encounter this tag and based on rel and type attributes will conclude that this is a CSS style sheet, which will load from the URL defined in the href attribute. When browser finish loading the CSS file, it will read the rules from it and apply them to HTML elements that suit them. The first two styles are applied only if the HTML is opened in a browser on a standard screen. When you open in form of a document for printing, it will be applied, only styles that have the attribute media = "print". In the same way you can define special styles that will determine how the HTML will be displayed on the mobile device, projector or television.
If some style should be applied only to one page or the part of the page, and nowhere else, you can embed it with the style tag, which is also placed in the header of the HTML page and in whose body you can put CSS rules.
Example 3: embedded CSS styles.
<!DOCTYPE html>
<html>
<head>
<title>Different CSS rules</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about different CSS rules" />
<meta name="keywords" content="CSS rules, CSS" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/2nd-style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" meadia="handheld" />
<link rel="stylesheet" type="text/css" href="css/projector.css" media="projection" />
<link rel="stylesheet" type="text/css" href="css/tv.css" media="tv" />
<!-- Start of embedded css rules -->
<style type="text/css">
body {
background-image:url(images/old-scrolled-paper.png);
background-repeat: no-repeat;
}
h1 {
margin-left: 630px;
font-family: Georgia;
font-size: 24px;
}
p {
margin-left: 250px;
margin-top: 350px;
color: black;
font-size: 22px;
font-family: Georgia;
}
.paragraph {
margin-right: 200px;
margin-top: 0;
margin-bottom: 750px;
}
</style>
<style type="text/css" media="print">
body {
margin: 30px;
}
</style>
<!-- End of embedded css rules -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<h1>Hello World</h1>
<p>This page has an image as the background.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel magna vel lorem pellentesque blandit. Cras ac turpis quis ante suscipit commodo. Nunc vel quam at tortor ornare feugiat. Integer vitae consectetur lacus. Praesent commodo velit vel commodo varius. Proin a enim vitae nunc aliquam efficitur eu sit amet elit. Praesent commodo blandit justo sodales lacinia. Sed in velit tortor. Proin eget neque ornare, cursus sem eget, feugiat justo. Curabitur ut ex vehicula, congue metus et, scelerisque lorem. Nulla odio nulla, dapibus id tincidunt vitae, vestibulum non felis. Curabitur et feugiat purus. Sed augue dapibus, congue justo ut, mollis justo. Aenean at quam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin bibendum tristique auctor. Mauris tincidunt lorem convallis turpis facilisis, et rhoncus ex aliquam. Mauris feugiat iaculis urna vel pellentesque. Fusce tempor posuere dictum. Nunc id dapibus orci, vitae eleifend ex. Cras porta commodo fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas non turpis non purus molestie molestie in vel arcu. Suspendisse at lacus varius, malesuada enim nec, tincidunt arcu. Etiam faucibus massa dolor, non sodales ante dapibus gravida. Sed aliquam tellus a consectetur rutrum. Sed nec mollis ex. Integer luctus arcu at nisi porta dignissim. Maecenas in faucibus eros. Nullam in ante id metus rutrum fringilla. Nunc nec sapien ut enim ultricies gravida. Donec euismod velit sit amet magna ullamcorper pretium. Donec sed suscipit nulla. Phasellus aliquet, dui sit amet cursus sodales, lacus ex sodales dolor, eget egestas lectus risus et neque. Quisque tristique lacus ut mattis bibendum. Proin efficitur convallis venenatis. Aliquam commodo pharetra augue, quis tristique urna vestibulum ac. Phasellus ac massa a magna imperdiet pellentesque. Donec egestas nunc sit amet dui cursus varius. Nam auctor ipsum ultrices est volutpat faucibus. Quisque ultricies ullamcorper magna, ut condimentum est sollicitudin id. In laoreet tellus vel lectus ultrices luctus. Nam venenatis faucibus dui, commodo eleifend diam elementum eget. Aenean non eros ac dolor auctor efficitur.</p>
</body>
</html>
Save this file as different-css-rules.html.
Explanation: it is possible to define which devices should be used a certain style, using the media attribute.
The third way to include styles on the page is the inline CSS. This is not recommended.
Example 4: inline CSS style.
<p style="font-size:24px; color: blue; margin-top: -700px;">This is not recommended.</p>
Complete code used in examples.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.