What is CSS
[ hide ]
What is CSS
CSS and HTML
How to start creating a Style Sheet
The base of your style sheet is your project: how do you want your text to look like? Which fonts do you want to use, which font face, which font color? And how do you want to display titles, sub-titles and the content paragraphs?
Taking as an example a WordPress Based Blog, such as Semiomantics XO I want the main headings (h1) (post titles) to be set in large black Times New Roman Fonts, the sub-titles (h2) in Red small caps 24px Verdana and the text paragraphs (p) in medium size dark gray (#222) Arial.
To define the Fonts, we can indicate generic font names and let the browser apply it’s defaults; in this case we just define whether we want serif, sans-serif, monospace, fantasy or script font defaults. This could mean that the browser settings finally decide which font face is actually seen by the visitor.
The second possibility is to define a font family according to the web designer’s preferences and priority. In this case, you would list your preferred fonts and conclude the list with the font type to indicate which generic font should be used in the absence of your preferences.
font: serif; would be a default setting
font-family: arial, verdana, sans-serif; would define the preferred font faces
The Font Size follows similar rules: we can either define the relative size small, medium or large, or absolute 12px, 18px and so on or in percentage or length.
font-size: small; relative
font-size: 18px; absolute
The Font Style can be changed from normal to italic or oblique:
The Font Variant can be changed to small caps for example:
The Font Weight can be changed to bold:
The Font Color can be changed for example to red with the color code #B30000:
The Background Color changes the the color behind the text:
for the color you can either use named colors or hexadecimal color codes.
Write your Style Sheet
Now we write our style sheet based on the above example:
Styles can be added in two ways: either you copy the above code into your page header between the tags, or you create a file called style.css for example and you link from your page header to the style-sheet file.
How to create a separate style-sheet file
1 Create a text file called style.css
2 Paste your style code into it and save the file to your template folder.
3 Create a link in your header pointing to your style-sheet.
From here you can load all styles needed to display your content according to your preferences, by adding more definitions and formatting code to your style-sheet.
More about this Topic
|Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.|
This page is wiki editable click here to edit this page.